<template>
  <!-- 需要引入mixin,loadingOption -->
  <div
    v-loading="pageLoading"
    :element-loading-text="loadingOption.text"
    :element-loading-spinner="loadingOption.spinner"
    :element-loading-background="loadingOption.background"
    class="orderDetail_main"
  >
    <div ref="pdfBox" class="pdfBox">

      <el-card shadow="never" class="card">
        <!-- pdf打印部分============↓ -->

        <!-- 进度条 -->
        <div class="step_main">
          <el-steps :active="step">
            <el-step
              v-for="(item,index) in stepList"
              :key="index"
              :title="item.name"
              :description="item.time ? item.time : ''"
            />
            <el-step
              v-if="step<=4"
              title="已完成"
              :description="detailObj.receiveTime"
            />
            <el-step
              v-if="step<=5 && step!=4"
              title="退货"
              :description="detailObj.finishTime"
            />
          </el-steps>
        </div>
        <el-divider />

        <!-- card body -->
        <!-- 商品信息 -->
        <div class="table-main">
          <div class="table-title">
            订单信息:
            <span style="margin-left:10px">
              <el-tag v-if="status === 0" type="danger" size="small" effect="dark">
                待付款
              </el-tag>
              <el-tag
                v-else-if="status === 1"
                size="small"
                type="warning"
                effect="dark"
              >待发货</el-tag>
              <el-tag v-else-if="status === 2" size="small"> 已发货 </el-tag>
              <el-tag v-else-if="status === 3" size="small" effect="dark">已完成</el-tag>
              <el-tag
                v-else-if="status === 4"
                size="small"
                type="info"
                effect="dark"
              >退货</el-tag>
              <el-tag v-else type="info" size="small"> 无效订单 </el-tag>
            </span>

          </div>
          <!-- <TableComponent
          :table-data="orderTableData"
          :table-style="{
            width: '100%',
            margin: '30px auto',
            fontSize: '16px'
          }"
        /> -->
          <OrderTable :table-data="orderTableData" />
        </div>
        <el-divider />
        <!-- 收货人信息 -->
        <div class="table-main">
          <div class="table-title">收货人信息:</div>
          <!-- <TableComponent
          :table-data="userTableData"
          :table-style="{
            width: '100%',
            margin: '30px auto',
            fontSize: '16px'
          }"
        /> -->
          <OrderTable :table-data="userTableData" />
        </div>
        <el-divider />

        <div class="table-main">
          <div class="table-title">商品信息:</div>
          <el-table style="margin-top: 20px" :data="orderItemList" border>
            <el-table-column prop="productName" label="商品名称" align="center" />
            <el-table-column
              prop="productName"
              label="商品图片"
              width="200px"
              align="center"
            >
              <template slot-scope="scope">
                <img
                  style="width: 100px; height: 100px"
                  :src="scope.row.productPic"
                  alt=""
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="isReturn"
              label="是否退货"
              width="250px"
              align="center"
            >
              <template slot-scope="scope">
                <span
                  v-if="scope.row.isReturn == 1"
                  style="color: red; cursor: pointer"
                  @click="goReturn(scope.row)"
                >是</span>
                <span v-else>否</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="productBrand"
              label="品牌"
              width="200px"
              align="center"
            />
            <el-table-column
              prop="productPrice"
              label="价格"
              width="200px"
              align="center"
            />
            <el-table-column
              prop="productQuantity"
              label="商品数量"
              width="200px"
              align="center"
            />

            <el-table-column
              fixed="right"
              prop="totalPrice"
              label="小计"
              width="250px"
              align="center"
            />
          </el-table>
        </div>

        <!-- 费用信息 -->
        <div class="table-main">
          <div class="table-title">费用信息:</div>
          <!-- <TableComponent
          :table-data="costData"
          :table-style="{
            width: '100%',
            margin: '30px auto',
            fontSize: '16px'
          }"
        /> -->
          <OrderTable :table-data="costData" />
        </div>
        <el-divider v-if="status > 1" />

        <div v-if="status > 1" class="table-main">
          <div class="table-title">
            物流信息:
            <span
              style="color: gray"
            >{{ detailObj.deliveryCompany }} [
              {{ detailObj.deliverySn }} ]</span>
          </div>
          <el-table
            :data="expressData"
            border
            stripe
            style="width: 100%; margin-top: 25px"
          >
            <el-table-column prop="AcceptTime" label="时间" width="180" />
            <el-table-column prop="AcceptStation" label="状态" />
            <el-table-column prop="Remark" label="备注" width="450" />
          </el-table>
        </div>

        <!-- =====================================pdf打印部分↑ -->
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          class="form-lable"
          :inline="false"
          size="mini"
        >
          <el-row v-if="status === 1" :gutter="20">
            <el-col :span="6" :offset="0">
              <el-form-item prop="deliveryCompany" label="物流公司">
                <el-select
                  v-model="form.deliveryCompany"
                  class="myInput"
                  size="mini"
                  placeholder="请选择物流公司"
                  clearable
                >
                  <el-option
                    v-for="(item,index) in options"
                    :key="index"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item prop="deliverySn" label="物流单号">
                <el-input
                  v-model="form.deliverySn"
                  class="myInput"
                  placeholder=""
                  size="mini"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="button_main">
          <!-- v-if="step===1" -->
          <el-button
            v-if="status === 1"
            type="primary"
            style="width: 150px"
            size="small"
            @click="sendOrder"
          >确认发货</el-button>
          <div v-if="status === 2">
            <el-button
              v-if="forceSendShow"
              type="primary"
              style="width: 150px"
              size="small"
              @click="forceFinishOrder"
            >
              强制确认收货
            </el-button>
          </div>
          <!-- <div v-if="status === 3">
            <el-button
              type="primary"
              style="width: 150px"
              size="small"
              @click="finishOrder"
            >关闭订单</el-button>
          </div> -->

          <!-- <el-button type="primary" size="default" ></el-button> -->
        </div>

      </el-card>
    </div>

    <!-- <el-button type="primary" size="small" @click="html2PDF">打印订单</el-button> -->

  </div>
</template>

<script>
import orderApi from '@/api/order/index'
// import tableComponent from '@/components/tableComponent/index'
import kdExpressData from './kdExpress.json'
import mixin from '@/mixins/index'
export default {
    name: 'OrederList',
    // components: { tableComponent },
    mixins: [mixin],
    data() {
        return {
            options: [
                {
                    id: 0,
                    name: '顺丰快递'
                },
                {
                    id: 1,
                    name: '韵达快递'
                },
                {
                    id: 2,
                    name: '中国邮政'
                },
                {
                    id: 3,
                    name: '申通快递'
                },
                {
                    id: 4,
                    name: '中通快递'
                }
            ],
            form: {
                deliverySn: '',
                deliveryCompany: ''
            },
            rules: {
                deliveryCompany: [
                    {
                        required: true,
                        message: '请填写物流公司',
                        trigger: 'change'
                    }
                ],
                deliverySn: [
                    {
                        required: true,
                        message: '请填写物流单号',
                        trigger: 'blur'
                    }
                ]
            },
            forceSendShow: true,
            pageLoading: true,
            statusTrans: {
                0: '待付款',
                1: '待发货',
                2: '已发货',
                3: '已完成',
                4: '已关闭'
            },
            id: '',
            status: 0, // 当前状态
            stepList: [
                { name: '待付款' },
                { name: '待发货' },
                { name: '已发货' }

            ],
            orderBaseObj: {},
            orderTableData: [], // 基本信息 mail-table  订单信息
            userTableData: [], // 基本信息 mail-table  收货人信息
            costData: [], // 基本信息 mail-table  收货人信息
            orderItemList: [] // 商品列表
            // orderTableData: [
            //     { key: '单号', value: '1001' },
            //     { key: '商品名称', value: '篮球' },
            //     { key: '价格', value: '120.00' },
            //     { key: '订单日期', value: '2017-03-01' },
            //     { key: '付款方式', value: '在线支付' },
            //     { key: '收货地址', value: '北京市海淀区西北旺镇' },
            //     { key: '收货地址', value: '北京市海淀区西北旺镇' },
            //     { key: '收货地址', value: '北京市海淀区西北旺镇' }
            // ],
        }
    },
    computed: {
        step() {
            return this.status + 1
        },
        expressData() {
            return kdExpressData.Traces
        }
    },
    created() {
        this.id = this.$route.params.id
        this.getOrderDetail()
    // orderApi.sendOrder().then(res => {console.log(res)})
    },
    methods: {
    // 去退单列表
        goReturn(row) {
            this.$router.push({
                name: 'orderBackDetail',
                params: { id: row.returnId }
            })
        },
        // 强制确认收货
        forceFinishOrder() {
            orderApi
                .forceFinishOrder(this.id)
                .then((res) => {
                    if (res.success) {
                        window.location.reload()
                    } else {
                        this.$message.error('关闭订单失败')
                    }
                })
                .catch((res) => {
                    this.$message.error('关闭订单失败')
                })
        },
        // 确认订单窗口
        sendOrder() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    orderApi
                        .sendOrder({
                            orderId: this.id,
                            deliverySn: this.form.deliverySn,
                            deliveryCompany: this.form.deliveryCompany
                        })
                        .then((res) => {
                            if (res.success) {
                                window.location.reload()
                            } else {
                                this.$message.error('确定订单失败')
                            }
                        })
                        .catch((res) => {
                            this.$message.error('确认订单失败')
                        })
                } else {
                    this.$message.warning('请填写必要信息')
                }
            })
        },
        // 关闭订单窗口
        finishOrder() {
            orderApi
                .finishOrder(this.id)
                .then((res) => {
                    if (res.success) {
                        window.location.reload()
                    } else {
                        this.$message.error('关闭订单失败')
                    }
                })
                .catch((res) => {
                    this.$message.error('关闭订单失败')
                })
        },

        // 获取详情
        getOrderDetail() {
            // orderApi.orderDetail(this.id).then((res) => {
            orderApi.orderDetail(this.id).then((res) => {
                if (res.success) {
                    this.detailObj = res.data.orderDetail.orderBase
                    this.orderItemList = res.data.orderDetail.orderItems
                    // 初始化订单信息
                    this.initOrderObj()
                    // 初始化用户信息
                    this.initUserObj()
                    // 初始化进度条信息
                    this.initStepList()
                    // 初始化费用信息
                    this.initCostObj()
                    // 判断是否可以强制收货
                    this.judgeForce()
                } else {
                    this.$message.error('获取数据失败')
                }
                this.pageLoading = false
            })
        },
        judgeForce() {
            // 循环商品的列表
            this.orderItemList.forEach((element) => {
                // isReturn===1的时候是退货商品 0的时候是正常商品
                if (element.isReturn === 0) {
                    this.forceSendShow = false
                }
            })
        },
        // 初始化订单Obj
        initOrderObj() {
            const orderObj = {
                订单金额: this.detailObj.totalAmount,
                订单编号: this.detailObj.orderSn,
                用户账号: this.detailObj.memberUsername,
                // 订单类型: this.detailObj.orderType === 1 ? '秒杀订单' : '正常订单',
                备注: this.detailObj.totalAmount,

                下单时间: this.detailObj.createTime,
                付款时间: this.detailObj.paymentTime,
                发货时间: this.detailObj.deliveryTime,
                收货时间: this.detailObj.receiveTime
            }
            // orderTableData
            for (const key in orderObj) {
                this.orderTableData.push({
                    key: key,
                    value: orderObj[key]
                })
            }
        },
        initUserObj() {
            const userObj = {
                收货人: this.detailObj.receiverName,
                用户姓名: this.detailObj.memberUsername,
                手机号码: this.detailObj.receiverPhone,
                邮政编码: this.detailObj.receiverPostCode,
                地市: this.detailObj.receiverProvince + ' ' + this.detailObj.receiverCity,
                详细地址: this.detailObj.receiverDetailAddress
            }
            for (const key in userObj) {
                this.userTableData.push({
                    key: key,
                    value: userObj[key]
                })
            }
        },
        initCostObj() {
            const costObj = {
                运费金额: 0,
                订单总金额: this.detailObj.totalAmount,
                实际金额: this.detailObj.payAmount,
                促销优化金额: this.detailObj.promotionAmount ? this.detailObj.promotionAmount : 0
            }
            for (const key in costObj) {
                this.costData.push({
                    key: key,
                    value: costObj[key]
                })
            }
        },

        // 初始化进度条信息
        initStepList() {
            this.stepList[0].time = this.detailObj.createTime
            this.stepList[1].time = this.detailObj.paymentTime
            this.stepList[2].time = this.detailObj.deliveryTime
            // this.stepList[3].time = this.detailObj.receiveTime
            // this.stepList[4].time = this.detailObj.finishTime
            this.status = this.detailObj.status
        }
        // html转化成pdf
        // html2PDF() {
        //     // this.$getPdf(this.$refs.pdfBox, '订单')

        //     this.$getPdf(this.$refs.pdfBox)
        // }
    }
}
</script>

<style lang="scss" scoped>
.orderDetail_main {
  min-height: 900px;
  padding-bottom: 10px;
  .form-lable{
    ::v-deep .el-form-item{
      label{
          font-weight: normal;
        }
    }
  }
  .step_main {
    margin: 30px auto;
    width: 80%;
  }
  .card {
    margin: 30px;
  }
  .table-main {
    margin: 20px 0;
    .table-title {
      color: rgba(0, 0, 0, 0.85);
      font-weight: 700;
      font-size: 16px;
      margin-bottom: 20px;
    }
  }
  .button_main {
    margin: 40px auto;
    display: flex;
    width: 100%;
    justify-content: center;
  }
  .myInput {
    width: 70%;
  }
  .pdfBox{
    position: relative;
    width: 100%;
    overflow: hidden;

  }
}
</style>

